<template>
  <div class="app-container">
    <el-card>
      <SearchForm
        :form-options="model.formOptions"
        :create="handleCreate"
        :delete="handleDelete"
        @search="search"
      />
      <Table
        :loading="loading"
        :data="model.list"
        :columns="model.columns"
        :total="model.total"
        :query="query"
        @pagination="queryList"
      >
        <el-table-column slot="status" label="状态" prop="deploymentId" align="center">
          <template slot-scope="{row}">
            <span v-if="row.deploymentId !== null">
              <el-tag type="success">已部署</el-tag>
            </span>
            <span v-else>
              <el-tag type="info">未部署</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          slot="action"
          label="操作"
          align="center"
          width="400"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row}">
            <el-button-group>
              <el-button type="primary" size="mini" @click="handleDrawSimple(row)" style="width: 80px;">设计[定制]</el-button>
              <el-button type="primary" size="mini" @click="handleDrawComplex(row)">设计[全]</el-button>
              <el-button type="primary" size="mini" @click="handleDeploy(row)">部署</el-button>
              <el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </Table>
      <!-- create -->
      <el-dialog
        :title="title"
        width="35%"
        top="5vh"
        :visible.sync="showDialog"
        :close-on-click-modal="false"
        @close="cancel"
      >
        <model-edit v-if="showDialog" ref="modelForm" :row="row" />
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </el-dialog>
    </el-card>

  </div>
</template>

<script>
import Table from '@/components/Table/index'
import ModelEdit from './porcess-edit'
import { mapState, mapActions } from 'vuex'
import { MessageBox } from 'element-ui'
import SearchForm from '@/components/SearchForm/index'
import ProcessDesign from './process-design'
import {getModelXml} from '../api/model'

import checkPermission from '@/utils/permission'

export default {
  name: 'ActivitiModeler',
  components: { Table, ModelEdit, SearchForm, ProcessDesign },
  data() {
    return {
      title: '创建模型',
      loading: false,
      showDialog: false,
      tableKey: 1,
      query: {
        name: '',
        key: '',
        pageNum: 1,
        pageSize: 200
      },
      modelId: '',
      // actUrl: process.env.VUE_APP_ACTIVITI_URL,
      //process.env.VUE_APP_SERVER_URL
      //actUrl: 'http://127.0.0.1:9900/activiti/static/modeler.html?'
      actUrl: process.env.VUE_APP_SERVER_URL+'flow/static/modeler.html?',
      dialogVisible: false,
      params:{
        id: '',
        row: '',
        bpmnXml:''
      },
    }
  },
  computed: {
    ...mapState({
      model: state => state.model
    })
  },
  mounted() {
    this.queryList()
  },
  methods: {
    // 页面级权限控制，调用方法如：hasPermission(['a2user:delete'])
    hasPermission(needPermisions) {
      return checkPermission(needPermisions)
    },
    ...mapActions('model', ['getList', 'deleteModel', 'deploy']),
    search(formData) {
      this.query = {
        ...this.query,
        ...formData
      }
      this.queryList()
    },
    queryList() {
      const self = this
      this.loading = true
      this.getList({
        ...self.query,
        success: () => {
          self.loading = false
        }
      })
    },
    async handleDrawSimple(row) {
      let routeData = this.$router.resolve({
        path: '/actDesigner',
        name: 'ActDesigner',
        query: {id: row.id},
      })
      window.open(routeData.href, '_blank')

     /* const that = this;
      // 到后台请求xml文件
      await getModelXml(row.id).then(function(r) {
          that.params.bpmnXml = r.remark;
          that.params.row = row
          that.params.id = row.id
        })
        .catch(function(err) {
          console.log('获取反显流程xml失败')
        })
      // 注意放的位置，避免异步请求导致实际设计器中没有bpmnXml值
      that.dialogVisible = true;*/
    },
    handleDrawComplex(row) {
      window.open(this.actUrl + `modelId=${row.id}`)
    },
    handleDeploy(row) {
      const self = this
      MessageBox.confirm('您确定要部署该模型吗？', '确认部署', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.deploy({
          modelId: row.id,
          success: (res) => {
            this.notify(res)
            self.queryList()
          }
        })
      })
    },
    handleCreate() {
      this.title = '创建模型'
      this.showDialog = true
      this.row = undefined
    },
    handleEdit(row) {
      this.title = '编辑模型'
      this.showDialog = true
      this.row = row
    },
    handleDelete(row) {
      const self = this
      MessageBox.confirm('您确定要删除该模型吗？', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.deleteModel({
          modelId: row.id,
          success: (res) => {
            this.notify(res)
            self.queryList()
          }
        })
      })
    },
    cancel() {
      this.modelId = ''
      this.showDialog = false
      this.$refs.modelForm.resetForm()
    },
    submit() {
      const self = this
      this.$refs.modelForm.submitForm(() => {
        self.showDialog = false
        self.queryList()
      })
    },
    // model desige simple
    handleVisiable(visiable) {
      this.dialogVisible = visiable
    },
  }
}
</script>

<style>
</style>
